<div class="p-3 bg-white"><h1 class="h3 m-0">Typography</h1></div>
<div class="p-3 relative">
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header"> Headings</div>
        <div class="card-body"><h1>h1. Bootstrap heading</h1>
          <h2>h2. Bootstrap heading</h2>
          <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header"> Headings - thin</div>
        <div class="card-body"><h1 class="font-thin">h1. Bootstrap heading</h1>
          <h2 class="font-thin">h2. Bootstrap heading</h2>
          <h3 class="font-thin">h3. Bootstrap heading</h3> <h4 class="font-thin">h4. Bootstrap heading</h4> <h5 class="font-thin">h5. Bootstrap heading</h5> <h6 class="font-thin">h6. Bootstrap heading</h6></div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="card mb-3">
        <div class="card-header"> Body Copy</div>
        <div class="card-body"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
          <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem
            nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
          <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p></div>
      </div>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header"> Lead Body Copy</div>
    <div class="card-body"><p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p> <code>&lt;p class="lead"&gt;...&lt;/p&gt;</code></div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header"> Font Color</div>
        <div class="card-body"><p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
          <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
          <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
          <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header"> Addresses</div>
        <div class="card-body">
          <address><strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890</address>
          <address><strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a></address>
        </div>
      </div>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header"> Blockquote</div>
    <div class="card-body">
      <div class="blockquote"><i class="fa fa-quote-left"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></div>
      <div class="blockquote"><i class="fa fa-quote-left"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
      </div>
    </div>
  </div>
  <div class="card mb-3">
    <div class="card-header">List</div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-4"><h5 class="subtitle">Unordered</h5>
          <p>A list of items in which the order does not explicitly matter.</p>
          <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit
              <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
              </ul>
            </li>
            <li>Integer molestie lorem at massa</li>
          </ul>
        </div>
        <div class="col-md-4"><h5 class="subtitle">Ordered</h5>
          <p>A list of items in which the order does explicitly matter.</p>
          <ol>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit
              <ol>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
              </ol>
            </li>
            <li>Integer molestie lorem at massa</li>
          </ol>
        </div>
        <div class="col-md-4"><h5 class="subtitle">Unstyled</h5>
          <p>A list of items with class of <code>.list-unstyled</code>.</p>
          <ul class="list-unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit
              <ol>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
              </ol>
            </li>
            <li>Integer molestie lorem at massa</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
